<template>
    <el-form ref="clueRemarkRuleFormRef" :rules="tranRemarkRules" :model="tranRemark" label-width="4.5%">
        <el-form-item label="交易ID:">
            <div class="detail">&nbsp;{{ tranDetail.id }}</div>
        </el-form-item>
        <el-form-item label="交易流水号:">
            <div class="detail">&nbsp;{{ tranDetail.tranNo }}</div>
        </el-form-item>
        <el-form-item label="客户详情:">
            <div class="detail">&nbsp;<router-link
                :to="'/dashboard/customer/' + tranDetail.customerId">查看客户详情
            </router-link>
            </div>
        </el-form-item>
        <el-form-item label="交易金额:">
            <div class="detail">&nbsp;{{ tranDetail.money }}</div>
        </el-form-item>
        <el-form-item label="预计成交时间:">
            <div class="detail">&nbsp;{{ tranDetail.expectedDate }}</div>
        </el-form-item>
        <el-form-item label="交易阶段:">
            <div class="detail">&nbsp;{{ tranDetail.stageDo.typeValue }}</div>
        </el-form-item>
        <el-form-item label="交易描述:">
            <div class="detail">&nbsp;{{ tranDetail.description }}</div>
        </el-form-item>
        <el-form-item label="下次跟踪时间:">
            <div class="detail">&nbsp;{{ tranDetail.nextContactTime }}</div>
        </el-form-item>
        <el-form-item label="跟踪记录:" prop="noteContent">
            <el-input
                v-model="tranRemark.noteContent"
                style="width: 20%;padding-left: 0;"
                :rows="8" type="textarea"
                placeholder="请输入交易跟踪记录"/>
        </el-form-item>
        <el-form-item label="跟踪方式:" prop="noteWay">
            <el-select
                v-model="tranRemark.noteWay"
                placeholder="请选择跟踪方式"
                style="width: 20%;padding-left: 0;"
                clearable
                @click="loadDicValue('noteWay')">
                <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id"/>
            </el-select>
        </el-form-item>
    </el-form>
    <el-form-item>
        <el-button type="primary" @click="customerRemarkSubmit()">提 交</el-button>
        <el-button type="success" @click="updateTran">更新交易阶段</el-button>
        <el-button type="primary" plain @click="goBack">返 回</el-button>
    </el-form-item>

    <el-form-item>
        <el-table :data="tranRemarkPageInfo.list" style="width: 100%">
            <el-table-column type="index" label="序号" width="55"/>
            <el-table-column property="noteContent" label="交易ID"/>
            <el-table-column property="noteWayDo.typeValue" label="跟踪方式"/>
            <el-table-column property="noteContent" label="跟踪内容"/>
            <el-table-column property="createTime" label="创建时间"/>
            <el-table-column property="createByDo.name" label="创建人"/>
            <el-table-column property="editTime" label="编辑时间"/>
            <el-table-column property="editByDo.name" label="编辑人"/>
            <el-table-column label="操作" width="110">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)"/>
                    <el-button type="danger" :icon="Delete" circle @click="deleteTranRemark(scope.row.id)"/>
                </template>
            </el-table-column>
        </el-table>
    </el-form-item>
    <el-pagination
        background layout="prev, pager, next, jumper, total"
        :total="tranRemarkPageInfo.total"
        :page-size="tranRemarkPageInfo.pageSize"
        @change="toPage"/>

    <!--更新交易阶段的对话框-->
    <el-dialog v-model="updateTranDialogVisible" title="更新交易阶段" width="800" align-center>
        <el-form ref="updateTranFormRef" :model="tranHistory" :rules="tranRules" label-width="110">
            <el-form-item label="交易阶段" prop="stage">
                <el-select v-model="tranHistory.stage" placeholder="请选择交易阶段" style="width: 100%;padding-left: 0;"
                           clearable @click="loadDicValue('stage')">
                    <el-option v-for="item in stageOptions" :key="item.id" :label="item.typeValue" :value="item.id"
                               :disabled="item.order <= tranDetail.stageDo.order"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="交易金额" prop="money">
                <el-input v-model="tranHistory.money" style="padding-left: 0;"/>
            </el-form-item>
            <el-form-item label="预计成交时间" prop="expectedDate">
                <el-date-picker style="width: 100%;" v-model="tranHistory.expectedDate" type="datetime"
                                placeholder="请选择预计成交时间" value-format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="updateTranSubmit()">更 新</el-button>
                <el-button @click="updateTranDialogVisible = false">关 闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {useRoute, useRouter} from 'vue-router';
import {ref, onMounted, inject} from 'vue';
import {doDelete, doGet, doPost} from '../http/httpRequest';
import {confirmMessage, showMessage} from '../util/message';
import {Delete, Edit} from "@element-plus/icons-vue";

// 获取当前路由信息，用于访问路由参数如tranId
let route = useRoute();
// 路由实例，用于页面导航操作
let router = useRouter();
// 交易详情信息的响应式对象，包含交易阶段、创建人、编辑人等信息
let tranDetail = ref({
    stageDo: {},      // 交易阶段信息
    createByDo: {},   // 创建人信息
    editByDo: {}      // 编辑人信息
})
// 交易备注信息的响应式对象，用于存储和更新备注内容
let tranRemark = ref({});
let tranRemarkPageInfo = ref({});
// 控制更新交易对话框显示状态的响应式变量
let updateTranDialogVisible = ref(false);
// 交易历史记录的响应式对象
let tranHistory = ref({});
// 注入父组件提供的刷新方法，用于局部刷新页面数据
let flush = inject('flush');
// 交易阶段选项的响应式数组，用于下拉框显示
let stageOptions = ref([]);
// 联系方式选项的响应式数组，用于下拉框显示
let noteWayOptions = ref([]);

// 组件挂载完成后执行的生命周期钩子
onMounted(() => {
    // 加载交易详细信息
    loadTranDetail();
    loadTranRemarkList(1);
})

/**
 * 加载字典数据函数
 * @param {string} typeCode - 字典类型编码
 * 根据字典类型编码加载对应的字典数据，如交易阶段、联系方式等
 */
const loadDicValue = typeCode => {
    // 发送GET请求获取字典数据
    doGet('/api/dic/' + typeCode, {}).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 根据类型编码判断应该赋值给哪个选项数组
            if (typeCode == 'stage') {
                // 交易阶段字典数据
                stageOptions.value = resp.data.info;
            }
            if (typeCode == 'noteWay') {
                // 联系方式字典数据
                noteWayOptions.value = resp.data.info;
            }
        }
    })
}

/**
 * 加载交易备注列表函数
 * @param {number} current - 当前页码
 * 通过路由参数获取交易ID，调用API获取交易备注分页数据
 */
const loadTranRemarkList = current => {
    // 从路由参数中获取交易ID
    let id = route.params.tranId;
    // 发送GET请求获取交易备注分页数据
    doGet('/api/tran/remark/' + id, {
        current: current  // 传递当前页码参数
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取到的分页数据赋值给响应式对象
            tranRemarkPageInfo.value = resp.data.info;
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载交易详细信息函数
 * 通过路由参数获取交易ID，调用API获取交易详细信息
 */
const loadTranDetail = () => {
    // 从路由参数中获取交易ID
    let id = route.params.tranId;
    // 发送GET请求获取交易详情数据
    doGet('/api/tran/' + id, {}).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 将获取到的交易详情数据赋值给响应式对象
            tranDetail.value = resp.data.info;
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 客户备注提交函数
 * 收集备注表单数据，调用API创建客户备注
 */
const customerRemarkSubmit = () => {
    // 发送POST请求创建客户备注
    doPost('/api/tran/remark', {
        tranId: route.params.tranId,        // 客户ID
        noteContent: tranRemark.value.noteContent,  // 备注内容
        noteWay: tranRemark.value.noteWay       // 联系方式
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 更新备注信息并刷新页面
            tranRemark.value = resp.data.info;
            flush();
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 更新交易信息提交函数
 * 收集交易表单数据，调用API更新交易信息
 */
const updateTranSubmit = () => {
    // 发送POST请求更新交易信息
    doPost('', {
        stage: tranHistory.value.stage,          // 交易阶段
        money: tranHistory.value.money,          // 交易金额
        expectedDate: tranHistory.value.expectedDate  // 预计成交日期
    }).then(resp => {
        // 检查响应状态码是否为成功(200)
        if (resp.data.code == 200) {
            // 更新成功后的操作（可选）
        } else {
            // 请求失败时显示错误消息
            showMessage(resp.data.meg, 'error');
        }
    })
}

/**
 * 更新交易函数
 * 设置更新交易对话框显示状态为true，打开交易更新对话框
 */
const updateTran = () => {
    // 显示更新交易对话框
    updateTranDialogVisible.value = true;
}

/**
 * 跳转到编辑页面的函数
 * @param {number} id - 要编辑的交易备注ID
 */
const edit = id => {
    router.push('/dashboard/tran/remark/edit/' + id);
}

/**
 * 删除交易备注的函数
 * @param {number} id - 要删除的交易备注ID
 */
const deleteTranRemark = id => {
    // 显示删除确认对话框，'warning'类型会显示黄色警告图标
    confirmMessage('确定删除?', 'warning').then(resp => {
        // 用户确认后调用删除API，拼接活动ID到URL
        doDelete('/api/tran/remark/delete/' + id).then(resp => {
            if (resp.data.code == 200) {
                showMessage('删除成功', 'success'); // 显示绿色成功提示
                flush(); // 调用注入的刷新函数，重新加载活动列表
            } else {
                showMessage(resp.data.msg, 'error'); // 显示红色错误提示，内容为后端返回的错误信息
            }
        }).catch(() => {
            // 捕获API调用异常（如网络错误），此处留空表示不做额外处理
        })
    })
}

/**
 * 分页页码变更处理函数
 * @param {number} current
 * 触发对应页码的列表数据加载
 */
const toPage = current => {
    loadTranRemarkList(current);
}

/**
 * 返回上一页函数
 * 通过路由实例的back方法实现页面回退
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>

</style>
